import React, { useState, useCallback, useEffect } from "react";
import classNames from "classnames";
import "./index.less";
import { TagPropsTypes } from "./PropsType";
import { baseColor as bordercolor, activeColor as activecolor } from "@/mixins";
import Icon from "@/ui/Icon";
import { typeProps } from "../Icon/PropsType";
export default function Tag(props: TagPropsTypes) {
  const {
    style = {},
    className,
    onChange,
    onClose,
    afterClose,
    disabled,
    selected = false,
    closable=false,
    small,
    children,
    color = "#222",
    activeColor = activecolor,
    borderColor = bordercolor,
    activeBorderColor = activecolor,
  } = props;
  const cls = classNames(`m-react-tag ${classNames} ${small ? "small" : ""}`);
  const [value, setValue] = useState(selected);
  const onChangeAction = useCallback(
    () => () => {
      setValue(!value);
    },
    [value]
  );
  useEffect(() => {
    onChange(value);
  }, [value]);
  const [status, setStatus] = useState(true);
  const closeClick = useCallback(() => {
    setStatus(false);
    afterClose && afterClose();
  }, [status]);
  return (
    <div
      className={cls}
      style={{
        ...style,
        color: `${value ? activeColor : color}`,
        borderColor: `${value ? activeBorderColor : borderColor}`,
        display: `${status ? "flex" : "none"}`,
        backgroundColor:`${disabled?'#eee':'none'}`
    
      }}
      onClick={disabled ? null : onChangeAction()}
    >
      {children}
      {closable && (
        <div
          className="close"
          onClick={closeClick}
        >
          <Icon
            size="m"
            style={{ width: "20px", height: "20px" }}
            iconName="cuo"
            type={typeProps.img}
          />
        </div>
      )}
    </div>
  );
}
